<template>
  <div class="container">
    <navigate>个人资料</navigate>

    <van-cell-group class="input_outer">
      <van-field
        v-model="info.name"
        label="真实姓名："
        placeholder="请输入姓名"
      />
    </van-cell-group>
    <van-cell-group class="input_outer">
      <van-field
        v-model="info.age"
        label="真实年龄："
        placeholder="请输入年龄"
      />
    </van-cell-group>
    <van-cell-group class="input_outer father_relative">
      <van-field
        readonly
        clickable
        v-model="info.sex.label"
        label="性别："
        placeholder="选择性别"
        @click="visibleSex = true"
      />
      <v-picker
        :columns="sexs"
        valueKey="label"
        @confirm="selectSexOperate"
        :isVisible="visibleSex"
        @cancel="visibleSex = false"
      />
      <img
        src="@/assets/images/common/right.png"
        class="right vertical_center"
        alt=""
      />
    </van-cell-group>
    <van-cell-group class="input_outer">
      <van-field
        disabled
        readonly
        clickable
        label="班级/部门："
        :value="currentDepartment"
        placeholder="请选择班级/部门"
        @click="visibleDepartment = true"
      />
      <van-popup round position="bottom" v-model="visibleDepartment">
        <van-cascader
          v-model="tempDepartment"
          active-color="#36bfff"
          :options="departmentList"
          @close="visibleDepartment = false"
        />
      </van-popup>
    </van-cell-group>

    <van-cell-group class="input_outer">
      <van-field
        disabled
        class="nowrap"
        v-model="info.user_number"
        label="班级内编号："
        placeholder="请输入编号"
      />
    </van-cell-group>

    <van-cell-group class="input_outer">
      <van-field
        class="nowrap"
        v-model="info.phone"
        maxlength="11"
        label="绑定手机号："
        placeholder="请输入手机号"
      />
    </van-cell-group>
    <!-- 
    <div class="title">登录信息</div>
    <div class="login_info">
      <div class="item flex_row flex_align_center">
        <div class="label">人脸凭证：</div>
        <div class="val flex_row flex_align_center">
          <img src="" alt="" />
          <div class="text">已录入</div>
        </div>
        <img
          src="@/assets/images/common/right.png"
          class="right vertical_center"
          alt=""
        />
      </div>
      <div class="item flex_row flex_align_center father_relative">
        <div class="label">指纹凭证：</div>
        <div class="val flex_row flex_align_center">
          <img src="@/assets/images/my/fingerprint.png" alt="" />
          <div class="text">已录入</div>
          <img
            src="@/assets/images/common/right.png"
            class="right vertical_center"
            alt=""
          />
        </div>
      </div>
    </div> -->

    <button class="btn" @click="save">保存</button>
  </div>
</template>

<script>
import { queryUserInfo } from "@/api/consultation/online.js";
import { queryDepartment, updateUserInfo } from "@/api/my/index.js";
import selectMixin from "@/mixins/selectMixin";
import { mapState, mapMutations } from "vuex";
export default {
  mixins: [selectMixin],
  data() {
    return {
      info: {
        name: "",
        age: "",
        sex: "",
        department: "",
        departmentId: "",
        phone: "",
        department_name: "",
      },
      tempDepartment: "",
      visibleDepartment: false,
    };
  },
  computed: {
    ...mapState(["INFO"]),
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    ...mapMutations(["SET_INFO"]),
    //用户消息
    async getUserInfo() {
      let res = await queryUserInfo({ id: this.INFO.id });
      if (res.code == 200) {
        this.info = {
          ...res.data,
          sex:
            res.data.sex == 1 ? { label: "男", id: 1 } : { label: "女", id: 2 },
        };
        this.currentDepartment = res.data.department_name;
      }
    },

    async save() {
      if (!this.validateChinesePhone(this.info.phone)) {
        return this.$toast.fail("请输入正确的手机号！");
      }
      const params = {
        id: this.INFO.id,
        name: this.info.name,
        age: this.info.age,
        sex: this.info.sex.id,
        phone: this.info.phone,
      };
      let res = await updateUserInfo(params);
      if (res.code == 200) {
        this.SET_INFO({
          ...this.INFO,
          name: this.info.name,
          age: this.info.age,
          sex: this.info.sex.id,
          phone: this.info.phone,
        });
        this.$toast.success("修改成功！");
        this.$router.push("/nav/my");
      }
    },
    //手机号校验
    validateChinesePhone(phone) {
      const reg = /^1[3-9]\d{9}$/;
      return reg.test(phone);
    },
    // 选择性别
    selectSexOperate(item) {
      this.info.sex = item;
      this.visibleSex = false;
    },
  },
};
</script>

<style lang="less" scoped>
@import "./css/index.less";
</style>
